<template>
    <div class="box">
      <div class="header">
        <router-link to="/mine">
          <img src="/static/lyl/BMQD-1.png" alt="">
        </router-link>
        <span>我的神灯值</span>
        <img src="/static/lyl/BMQD-3.png" alt="">
      </div>

      <div class="title">
        <img :src="src" alt="">
        <span>{{nis}}</span>
        <span>{{zhi}}</span>
      </div>

      <ul class="ulone">
        <li v-for="item in data">
          <router-link :to="item.to">
            <div class="left">
              <img :src="item.src1" alt="">
              <span>{{item.txt}}</span>
            </div>
            <img :src="item.src2" alt="">
          </router-link>
        </li>
      </ul>

      <div class="hate">
        <span></span>
        <span>神灯值猜你喜欢</span>
        <span></span>
      </div>

      <ul class="ultwo">
        <li v-for="item in data2">
          <div class="tou">
            <img :src="item.src3" alt="">
          </div>
          <p>{{item.txt2}}</p>
          <p>
            <span>{{item.num}}</span>
            <img :src="item.src4" alt="">
          </p>
          <s>{{item.txt3}}</s>
        </li>
      </ul>

      <Scrolltop></Scrolltop>
    </div>
</template>

<script>
  import faker from 'faker'
  import Scrolltop from '../zwf/Scrolltop'
    export default {
      name: "Myshenzhi",
      components:{
        Scrolltop
      },
      data(){
        return {
          src:faker.image.avatar(),
          zhi:this.$store.state.shen,
          data:[
            {to:'/duihuan',src1:'/static/lyl/xie.png',txt:'兑换记录',src2:'/static/lyl/youjian.png'},
            {to:'/mingxi',src1:'/static/lyl/deng.png',txt:'神灯值明细',src2:'/static/lyl/youjian.png'},
          ],
          data2:[
            {src3:'/static/lyl/anda.png',txt2:'蜗牛饰容BB霜50g',num:'500',src4:'/static/lyl/huangdeng.png',txt3:'￥22.30'},
            {src3:'/static/lyl/anda.png',txt2:'蜗牛饰容BB霜50g',num:'500',src4:'/static/lyl/huangdeng.png',txt3:'￥22.30'},
            {src3:'/static/lyl/anda.png',txt2:'蜗牛饰容BB霜50g',num:'500',src4:'/static/lyl/huangdeng.png',txt3:'￥22.30'},
            {src3:'/static/lyl/anda.png',txt2:'蜗牛饰容BB霜50g',num:'500',src4:'/static/lyl/huangdeng.png',txt3:'￥22.30'}
          ]
        }
      },
      computed:{
        nis(){
          return this.$store.state.nichen;
        }
      }
    }
</script>

<style scoped>
  .box{
    background: #f2f2f2;
  }
  .header{
    padding: 2.7rem 2rem;
    background: #e53e42;
    display: flex;
    justify-content: space-between;
  }
  .header a img{
    width: 2.1rem;
    height: 3.8rem;
  }
  .header img:nth-child(3){
    width: 3.5rem;
    height: 1rem;
    margin-top: 1.6rem;
  }
  .header span{
    font-size: 36px;
    color: #fff;
  }

  .title{
    background: url("/static/lyl/shen123.png") no-repeat center/cover;
    background-size: 100% 100%;
    padding: 2rem 0 9rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .title img{
    width: 10.2rem;
    height: 10.2rem;
    border-radius: 50%;
  }
  .title span:nth-child(2){
    font-size: 24px;
    line-height: 36px;
    color: #fff;
    margin: 2rem 0;
  }
  .title span:nth-child(3){
    font-size: 48px;
    color: #ffd21f;
  }

  .ulone{
    background: #fff;
  }
  .ulone li{
    border-bottom: 1px solid #ccc;
  }
  .ulone li a{
    padding: 2rem;
    display: flex;
    justify-content: space-between;
  }
  .ulone li a>img{
    width: 1.1rem;
    height: 2.1rem;
  }
  .ulone li a .left img{
    width: 3rem;
    height: 3rem;
    margin-right: 1.5rem;
  }
  .ulone li a .left span{
    font-size: 28px;
    line-height: 36px;
  }

  .hate{
    padding: 3.5rem 0;
    display: flex;
    justify-content: center;
  }
  .hate span:nth-child(2n+1){
    width: 15rem;
    height: 0;
    border: 1px solid #ccc;
    align-self: center;
  }
  .hate span:nth-child(2){
    font-size: 30px;
    line-height: 36px;
    color: #808080;
    margin: 0 2rem;
  }

  .ultwo{
    padding: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
  }
  .ultwo li{
    width: 48%;
    margin-bottom: 2rem;
    background: #fff;
    padding-bottom: 2rem;
  }
  .ultwo li .tou{
    position: relative;
    height: 26rem;
    border-bottom: 1px solid #ccc;
  }
  .ultwo li .tou img{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 7rem;
    height: 14.5rem;
  }
  .ultwo li p{
    font-size: 24px;
    line-height: 36px;
    margin: 2rem 0;
  }
  .ultwo li p:nth-child(3) span{
    font-size: 28px;
    line-height: 36px;
    color: #e53e42;
  }
  .ultwo li s{
    font-size: 28px;
    line-height: 36px;
    color: #808080;
  }
</style>
